<template>
	<view>
		<view v-if="!src" class="flex align-center justify-center" style="height:500rpx;">
			<image :src="form.img" style="width:150px;height:150px;" />
		</view>
		<view style="height:500rpx;" v-if="!!src">
			<Cropper ref="cropper"
			width="100%"
			height="500rpx"
			cutWidth="150"
			:boundDetect="true"
			:keepRatio="true"
			:disableCtrl="true"
			:zoom="1"
			:angle="0"
			:src="src"
			@cropped="cropped"
			></Cropper>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn lg" @click="clickUpload">选择图片</button>
			<view class="cu-form-group margin-top">
				<view class="title">商品名称</view>
				<input v-model="form.name" placeholder="10个字以内"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">商品价格</view>
				<input type="number" v-model="form.price" placeholder="单位为分"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">排序数字</view>
				<input type="number" v-model="form.orderNumber" placeholder="数字越大越排前面"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">是否上架</view>
				<switch :checked="form.status==0" @change="statusChange"></switch>
			</view>
			<button class="margin-top cu-btn bg-blue lg" @click="submitForm">提交</button>
			<button v-if="!!_id" class="margin-top cu-btn bg-red lg" @click="clickDelete">删除</button>
		</view>
	</view>
</template>

<script>
	import Cropper from '@/components/nice-cropper/cropper.vue';
	export default {
		components:{
			Cropper
		},
		data() {
			return {
				_id:null,
				src:'',
				croppedSrc:'',
				form:{
					machine_id:'',
					img:'',
					orderNumber:0,
					name:'',
					price:0,
					status:0
				},
			}
		},
		onLoad(option) {
			//载入数据
			if(!!option._id){
				this._id=option._id;
				let data=this.$store.state.machine.goodsArr.find(item=>{return item._id==option._id});
				Object.assign(this.form,data);
			}
		},
		methods: {
			_back(){
				this.$store.state.machine.goodsArr.sort((a,b)=>{return b.orderNumber-a.orderNumber;});
				uni.navigateBack({
				    delta: 1
				});
			},
			statusChange(e){
				this.form.status=e.target.value?0:-10;
				//console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			_submitForm(){
				if(!!this._id){
					this.form._id=this._id;
					this.$u.api.customer_machineEditGoods(this.form).then(data => {
						let goods=this.$store.state.machine.goodsArr.find(item=>{return item._id==this._id});
						Object.assign(goods,this.form);
						this._back();
					});
				}else{
					delete this.form._id;
					this.$u.api.customer_machineAddGoods(this.form).then(data => {
						this.form._id=data;
						this.$store.state.machine.goodsArr.push(Object.assign({},this.form));
						this._back();
					});
				}
			},
			submitForm(){
				if(!this.$store.state.machine){
					return;
				}
				this.form.machine_id=this.$store.state.machine._id;
				if(!!this.croppedSrc){
					this.urlTobase64(this.croppedSrc,(data)=>{
						this.form.img=data;
						this._submitForm();
					})
				}else{
					this._submitForm();
				}
				
			},
			clickDelete(){
				uni.showModal({
					title:'确认删除',
					content:'您确认要删除这个商品么？',
					success:(res)=>{
						if (res.confirm) {
							this.$u.api.customer_machineDeleteGoods({_id:this._id,machine_id:this.$store.state.machine._id}).then(data => {
								let goodsIndex=this.$store.state.machine.goodsArr.findIndex(item=>{return item._id==this._id});
								this.$store.state.machine.goodsArr.splice(goodsIndex,1);
								this._back();
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			urlTobase64(url,cb) {
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: res => {
						let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						let toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						cb(toBase64Url);
					}
				});
			},
			clickUpload() {
				//this.$refs.uploadImg.click();
				// let that=this;
				wx.chooseImage({
				  count: 1,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success:(res)=>{
				    // tempFilePath可以作为img标签的src属性显示图片
				    const tempFilePaths = res.tempFilePaths;
					this.src=res.tempFilePaths[0];
				  }
				})
			},
			cropped(imagePath, imageInfo){
				this.croppedSrc=imagePath;
				// console.log(imagePath,imageInfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
